<template>
	<coreshop-page title="搜索" mode="left">
		<view class="layout-search-box">
			<view class="search-box">
				<uv-input shape="circle" placeholder="请输入关键词" prefixIcon="search" v-model="state.value"
					:customStyle="{ 'background-color': '#fff' }" @confirm="handleSearch"
					prefixIconStyle="font-size: 22px;color: #909399">
					<template #suffix>
						<view class="search-tit" @click.stop="handleSearch">搜索</view>
					</template>
				</uv-input>
			</view>
			<!-- 历史搜索 -->
			<view class="search-title" v-if="state.historyList.length > 0">
				<view class="title">
					<view class="tit">历史搜索</view>
					<view class="delete" @click="handleDeleteHistoryList">删除</view>
				</view>
				<view class="tag-box">
					<view class="tag" v-for="item, index in state.historyList" :key="index"
						@click="handleRouteNavigateTo(`/pages/category/category?key=${item}`)">{{ item }}
					</view>
				</view>
			</view>
			<!-- 推荐搜索 -->
			<view class="search-title">
				<view class="title">推荐搜索</view>
				<view class="tag-box">
					<view class="tag" v-for="item, index in recommendList" :key="index"
						@click="handleRouteNavigateTo(`/pages/category/category?key=${item}`)">{{ item }}
					</view>
				</view>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, computed } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { useShopConfigStore } from '@/core/store';
	import { historySearch } from '@/core/consts';
	import { handleRouteNavigateTo } from '@/core/utils';

	// 获取项目配置
	const shopConfigStore = useShopConfigStore();

	const state = reactive<{
		value : string;
		historyList : Array<string>;
	}>({
		value: "",
		historyList: [],
	});

	/** 获取推荐搜索 */
	const recommendList = computed(() => {
		return shopConfigStore?.config?.recommendKeys;
	})

	onShow(() => {
		/** 获取历史搜索 */
		state.historyList = uni.getStorageSync(historySearch) || [];
	});

	/** 删除历史搜索 */
	const handleDeleteHistoryList = () => {
		state.historyList = [];
		uni.removeStorageSync(historySearch)
	}

	/** 去搜索 */
	const handleSearch = () => {
		if (state.value && !state.historyList.includes(state.value)) {
			state.historyList.push(state.value);
			uni.setStorageSync(historySearch, state.historyList);
		}
		handleRouteNavigateTo(`/pages/category/category?key=${state.value}`);
		state.value = '';
	}
</script>
<style lang="scss" scoped>
	@import './search.scss';
</style>